<template>
    <div class="mask">
        <a-form :model="formState" v-bind="layout" name="nest-messages" :validate-messages="validateMessages"
            @finish="onFinish">
            <div>
                <a-form-item name="cnum" label="设备编号" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.cnum" />
                </a-form-item>

                <a-form-item name="equipname" label="设备名称" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.equipname" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="equiptype" label="类型" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.equiptype" />
                </a-form-item>

                <a-form-item name="district" label="绑定区域" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.district" />
                </a-form-item>
            </div>

            <div>
                <a-form-item name="ip" label="ip地址" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.ip" />
                </a-form-item>

                <a-form-item name="factory" label="设备厂商" :rules="[{ required: true }]">
                    <a-input v-model:value="formState.factory" />
                </a-form-item>
            </div>

            <hr />
            <el-button @click="update(props.pro)">保存</el-button>
            <el-button @click="hide">取消</el-button>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
import service from "../../utils/service"

const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 0 },
};

const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

interface mydata {
    "cnum": string,
    "equipname": string,
    "equiptype": string,
    "district": string,
    "ip": string,
    "factory": string,
    "operate": string[]
}

const formState = reactive<mydata>({
    "cnum": '',
    "equipname": '',
    "equiptype": '',
    "district": '',
    "ip": '',
    "factory": '',
    "operate": [
        "编辑",
        "删除",
        "禁用"
    ]
});

const onFinish = (values: any) => {
    console.log('Success:', values);
};
const props = defineProps<{
    pro: any;
}>();
console.log(props.pro);



const emit = defineEmits<{
    (e: "hide"): void;
    (e: "upmydate"): void;
}>();
const hide = () => {
    emit("hide");
};

const getform = () => {
    service({
        url: "equipment?id=" + props.pro,
        method: "get"
    }).then((res) => {
        formState.cnum = res.data[0].cnum;
        formState.equipname = res.data[0].equipname;
        formState.equiptype = res.data[0].equiptype;
        formState.district = res.data[0].district;
        formState.ip = res.data[0].ip;
        formState.factory = res.data[0].factory;
    })
}
getform()

const update = (id: any) => {

    getform();
    service({
        url: "equipment/" + id,
        method: "patch",
        data: formState,
    }).then(() => {
        emit("hide");
        emit("upmydate");
    })

}
</script>

<style scoped>
.mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: gray;
    opacity: 0.9;
    z-index: 999;
}

.ant-form {
    width: 1200px;
    height: 300px;
    margin: auto;
    background-color: whitesmoke;
    position: fixed;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    overflow: auto;
}

.ant-form div {
    display: flex;
    margin-bottom: 10px;
}
</style>